<template>
	<view class="detail">
		<musichead :title="songDetail.name" :icon="true" color="white" :img="songDetail.al.picUrl"></musichead>
		<view class="fixbg" :style="{ 'background-image' : 'url('+ songDetail.al.picUrl +')' }"></view>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songDetail.al.picUrl" :class="{ 'detail-play-run' : isPlayRotate }" mode=""></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<view class="detail-lyric">

					<!-- 复杂一点就是至少渲染三行以上，那样动画就很难做 
					当时闲麻烦没做，因为要在播放器里面从新写一个歌词组件，并且页面也有歌词-->
					<!-- 这个我cv的 也要研究一下 看一眼就会了 -->
					<view class="detail-lyric-wrap"
						:style="{ transform : 'translateY('+ - (lyricIndex -1) * 82 +'rpx)' }">

						<view class="detail-lyric-item" :class="{ active : lyricIndex == index }"
							v-for="(item,index) in songLyric" :key="index">{{ item.lyric }}</view>

					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>

					<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index"
						@tap="handleToSimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70"
									src="../../static/dujia.png" mode=""></image>
								<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png" mode=""></image>
								{{ item.album.artists[0].name }} - {{ item.name }}
							</view>
						</view>
						<text class="iconfont iconbofang"></text>
					</view>

				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>

					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{ item.user.nickname }}</view>
									<view>{{ item.time | formatTime }}</view>
								</view>
								<view class="detail-comment-like">{{ item.likedCount | formatCount }} <text
										class="iconfont iconlike"></text></view>
							</view>
							<view class="detail-comment-text">{{ item.content }}</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		songComment,
		songDetail,
		songLyric,
		songSimi,
		songUrl
	} from '../../common/api.js'
	import musichead from '../../components/muics/muics.vue';
	import '@/common/iconfont.css'
	export default {
		data() {
			return {
				songDetail: {
					al: {
						picUrl: ''
					}
				},
				songSimi: [],
				songComment: [],
				songLyric: [],
				lyricIndex: 0,
				iconPlay: 'iconpause',
				isPlayRotate: true,
				isLoading: true,
				bgAudioMannager: null,
				// 定时器
				timer: null
			}

		},
		components: {
			musichead
		},
		methods: {
			getMusic(songId) {
				uni.showLoading({
					title: '加载中...'
				})
				this.isLoading = true;
				Promise.all([songDetail(songId), songSimi(songId), songComment(songId), songLyric(songId), songUrl(
					songId)]).then((res) => {
					if (res[0][1].data.code == '200') {
						this.songDetail = res[0][1].data.songs[0]
						this.$store.commit('NEXT_ID', this.songDetail.id);
					}
					if (res[1][1].data.code == '200') {
						// 这里你写错了
						this.songSimi = res[1][1].data.songs
					}
					if (res[2][1].data.code == '200') {
						// 这里你写错了
						this.songComment = res[2][1].data.hotComments

					}
					if (res[3][1].data.code == '200') {
						const lyric = res[3][1].data.lrc.lyric.split('\n')
						// console.log(lyric);
						const re = []
						lyric.forEach(item => {
							if (item) {
								// 这里没考虑性能，能跑就行
								const value = item.split(']')[0].trim().substr(1).split(':')
								const newtime = (Number(value[0] * 60) + Number(value[1])).toFixed((1))
								re.push({
									time: newtime,
									lyric: item.split(']')[1].trim()
								})

							}
						})
						this.songLyric = re
						// 进入页面自动播放，调用计时
						this.changeLyric()
					}
					if (res[4][1].data.code == '200') {
						this.bgAudioMannager = uni.getBackgroundAudioManager()
						this.bgAudioMannager.title = this.songDetail.name;
						this.bgAudioMannager.src = res[4][1].data.data[0].url || '';
						// this.bgAudioMannager.playbackRate = 2.0
						this.bgAudioMannager.onPlay(() => {
							this.isPlayRotate = true
							this.iconPlay = 'iconpause'

						})
						this.bgAudioMannager.onPause(() => {
							this.isPlayRotate = false
							this.iconPlay = 'iconbofang1'
						})
						this.bgAudioMannager.onEnded(() => {
							this.getMusic(this.$store.state.nextId)
						});
					}

					this.isLoading = false
					uni.hideLoading()
				})

			},
			handleToPlay() {
				if (this.bgAudioMannager.paused) {
					this.bgAudioMannager.play()
					// 如果点击播放，则开始计时
					this.changeLyric()
				} else {
					this.bgAudioMannager.pause()

					clearInterval(this.timer)
					this.timer = null
				}
			},
			// 歌词滚动
			changeLyric() {
				// 调用前清空原来的计时器 不能删
				clearInterval(this.timer)
				this.timer = null
				// 重新开启计时器
				this.timer = setInterval(() => {
					if (this.bgAudioMannager.currentTime) {
						// 必须转成数字型
						const currentTime = this.bgAudioMannager.currentTime.toFixed(1) * 1
						// console.log('暂停');
						// 对歌曲进度进行判断，加载当前索引
						for (let i = 0; i < this.songLyric.length; i++) {
							if (currentTime > this.songLyric[i].time * 1 && currentTime < this.songLyric[i + 1]
								.time *
								1) {
								this.lyricIndex = i
							}
						}
					}

				}, 500)
			}
			// 就这四个地方
		},
		onLoad(options) {
			this.getMusic(options.songId)
		}
	}
</script>


<style scoped>
	.detail-play {
		width: 580rpx;
		height: 580rpx;
		background: url(~@/static/disc.png);
		background-size: cover;
		margin: 214rpx auto 0 auto;
		position: relative;
	}

	.detail-play image {
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		animation: 10s linear move infinite;
		animation-play-state: paused;
	}

	.detail-play .detail-play-run {
		animation-play-state: running;
	}

	@keyframes move {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.detail-play text {
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: white;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.detail-play view {
		width: 230rpx;
		height: 360rpx;
		background: url(~@/static/needle.png);
		position: absolute;
		left: 100rpx;
		right: 0;
		top: -200rpx;
		margin: auto;
		background-size: cover;
	}

	.detail-lyric {
		font-size: 32rpx;
		line-height: 82rpx;
		height: 246rpx;
		text-align: center;
		overflow: hidden;
		color: #6f6e73;
	}

	.detail-lyric-wrap {
		transition: .5s;
	}

	.detail-lyric-item {
		height: 82rpx;
	}

	.detail-lyric-item.active {
		color: white;
	}

	.detail-like {
		margin: 0 30rpx;
	}

	.detail-like-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.detail-like-item {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.detail-like-img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.detail-like-img image {
		width: 100%;
		height: 100%;
	}

	.detail-like-song {
		flex: 1;
		color: #c6c2bf;
	}

	.detail-like-song view:nth-child(1) {
		font-size: 28rpx;
		color: white;
		margin-bottom: 12rpx;
	}

	.detail-like-song view:nth-child(2) {
		font-size: 22rpx;
	}

	.detail-like-song image {
		width: 26rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.detail-like-item text {
		font-size: 50rpx;
		color: #c6c2bf;
	}

	.detail-comment {
		margin: 0 30rpx;
	}

	.detail-comment-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.detail-comment-item {
		margin-bottom: 28rpx;
		display: flex;
	}

	.detail-comment-img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 18rpx;
	}

	.detail-comment-img image {
		width: 100%;
		height: 100%;
	}

	.detail-comment-content {
		flex: 1;
		color: #cbcacf;
	}

	.detail-comment-title {
		display: flex;
		justify-content: space-between;
	}

	.detail-comment-name {}

	.detail-comment-name view:nth-child(1) {
		font-size: 26rpx;
	}

	.detail-comment-name view:nth-child(2) {
		font-size: 20rpx;
	}

	.detail-comment-like {
		font-size: 28rpx;
	}

	.detail-comment-text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: white;
		margin-top: 20rpx;
		border-bottom: 1px #e0e0e0 solid;
		padding-bottom: 40rpx;
	}
</style>
